import React, { useEffect, useState, useRef } from 'react';
import * as echarts from 'echarts';
import { getChartData, getChartData2, getChartData3, getChartData4} from '../service/chart';

const ChartComponent = () => {
  const [chartData, setChartData] = useState({});
  const [chartData2, setChartData2] = useState({});
  const [chartData3, setChartData3] = useState({}); // 新增第三个数据源状态
  const [chartData4, setChartData4] = useState({}); // 新增第四个数据源状态
  const chartRef1 = useRef(null);
  const chartRef2 = useRef(null);
  const chartRef3 = useRef(null); // 新增第三个图表的引用
  const chartRef4 = useRef(null); // 新增第四个图表的引用
  const myChartRef1 = useRef(null);
  const myChartRef2 = useRef(null);
  const myChartRef3 = useRef(null); // 新增第三个图表实例的引用
  const myChartRef4 = useRef(null); // 新增第四个图表实例的引用

  useEffect(() => {
    const fetchData = async () => {
      try {
        // 并行获取四个图表的数据
        const [response1, response2, response3, response4] = await Promise.all([
          getChartData(),
          getChartData2(),
          getChartData3(),
          getChartData4()
        ]);
        
        // 处理第一个图表的数据
        if (response1.success && response1.code === '0') {
          setChartData(response1.data);
        }
        
        // 处理第二个图表的数据
        if (response2.success && response2.code === '0') {
          setChartData2(response2.data);
        }
        
        // 处理第三个图表的数据（用于第二个图表显示）
        if (response3 && response3.success && response3.code === '0') {
          console.log('获取到chartData3数据:', response3.data);
          setChartData3(response3.data);
        }
        
        // 处理第四个图表的数据（用于第四个图表显示）
        if (response4 && response4.success && response4.code === '0') {
          console.log('获取到chartData4数据:', response4.data);
          setChartData4(response4.data);
        }
      } catch (error) {
        console.error('获取报表数据失败:', error);
      }
    };
    fetchData();
  }, []);

  useEffect(() => {
    // 检查是否有数据且图表容器存在
    if (!chartRef1.current || !chartRef2.current) return;

    // 处理第一个图表数据
    if (Object.keys(chartData).length > 0) {
      // 将对象数据转换为ECharts需要的数组格式 [{name: 'key', value: value}, ...]
      const chartDataArray = Object.entries(chartData).map(([key, value]) => ({
        name: key,
        value: value
      }));

      // 初始化第一个图表（环形图）
      if (!myChartRef1.current) {
        myChartRef1.current = echarts.init(chartRef1.current);
      }
      const option1 = {
        title: {
          text: '商家旗下店铺数据统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: chartDataArray.map(item => item.name)
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        series: [
          {
            name: '商家数据',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '60%'],
            avoidLabelOverlap: false,
            roseType: 'area',
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            data: chartDataArray
          }
        ]
      };
      myChartRef1.current.setOption(option1);
    }

    // 处理第二个图表数据
    if (Object.keys(chartData3).length > 0) {
      // 将对象数据转换为ECharts需要的数组格式 [{name: 'key', value: value}, ...]
      const chartData2Array = Object.entries(chartData3).map(([key, value]) => ({
        name: key,
        value: value
      }));

      // 初始化第二个图表（极坐标柱状图）
      if (!myChartRef2.current) {
        myChartRef2.current = echarts.init(chartRef2.current);
      }
      const option2 = {
        title: [
            {
              text: '各状态活动数量统计',
              top: 10,
              left: 'center',
              // textStyle: {
              //   fontSize: 14
              // }
            }
          ],
        polar: {
          radius: [30, '60%'] // 减小外半径，增加文字显示空间
        },
        angleAxis: {
          max: chartData2Array.length,
          startAngle: 90,
          axisLabel: {
            fontSize: 7, // 减小角度轴标签字体大小
            rotate: 0 // 不旋转标签
          }
        },
        radiusAxis: {
          type: 'category',
          data: chartData2Array.map(item => item.name), // 使用chartData2的数据
          axisLabel: {
            fontSize: 6, // 减小半径轴标签字体大小
            color: '#666'
          }
        },
        tooltip: {},
        series: {
          type: 'bar',
          data: chartData2Array.map(item => item.value), // 使用chartData2的数据值
          coordinateSystem: 'polar',
          label: {
            show: false, // 完全隐藏标签，避免重叠
          },
          // 为了弥补标签隐藏的问题，我们可以调整柱形图的样式使其更容易区分
          itemStyle: {
            borderRadius: [4, 4, 0, 0] // 给柱形图添加圆角
          }
        },
        grid: {
          top: 60, // 增加顶部空间
          bottom: 40, // 增加底部空间
          left: 40, // 增加左侧空间
          right: 40 // 增加右侧空间
        }
      };
      myChartRef2.current.setOption(option2);
    }

    // 处理第三个图表（饼图）
    if (chartRef3.current && Object.keys(chartData2).length > 0) {
      // 将对象数据转换为ECharts需要的数组格式 [{name: 'key', value: value}, ...]
      const chartData2Array = Object.entries(chartData2).map(([key, value]) => ({
        name: key,
        value: value
      }));

      if (!myChartRef3.current) {
        myChartRef3.current = echarts.init(chartRef3.current);
      }
      const option3 = {
        title: {
          text: '店铺文章数量统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: chartData2Array.map(item => item.name)
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: chartData2Array,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChartRef3.current.setOption(option3);
    }

    // 处理第四个图表（折线图）
    if (chartRef4.current && Object.keys(chartData4).length > 0) {
      // 将对象数据转换为ECharts需要的格式，按日期排序
      const sortedEntries = Object.entries(chartData4).sort(([date1], [date2]) => 
        new Date(date1) - new Date(date2)
      );
      
      const dates = sortedEntries.map(([date]) => date); // 日期作为x轴
      const values = sortedEntries.map(([, value]) => value); // 数值作为y轴

      if (!myChartRef4.current) {
        myChartRef4.current = echarts.init(chartRef4.current);
      }
      const option4 = {
        title: {
          text: '每日用户注册数量',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            const data = params[0];
            return `${data.name}<br/>用户注册数量: ${data.value}`;
          }
        },
        xAxis: {
          type: 'category',
          data: dates,
          axisLabel: {
            rotate: 45
          }
        },
        yAxis: {
          type: 'value',
          minInterval: 1 // 确保y轴显示整数
        },
        series: [
          {
            data: values,
            type: 'line',
            smooth: true,
            name: '用户注册数数量'
          }
        ]
      };
      myChartRef4.current.setOption(option4);
    }

    // 处理窗口大小变化
    const handleResize = () => {
      if (myChartRef1.current) {
        myChartRef1.current.resize();
      }
      if (myChartRef2.current) {
        myChartRef2.current.resize();
      }
      if (myChartRef3.current) {
        myChartRef3.current.resize();
      }
      if (myChartRef4.current) {
        myChartRef4.current.resize();
      }
    };
    window.addEventListener('resize', handleResize);

    // 组件卸载时销毁图表实例和移除事件监听
    return () => {
      window.removeEventListener('resize', handleResize);
      if (myChartRef1.current) {
        myChartRef1.current.dispose();
        myChartRef1.current = null;
      }
      if (myChartRef2.current) {
        myChartRef2.current.dispose();
        myChartRef2.current = null;
      }
      if (myChartRef3.current) {
        myChartRef3.current.dispose();
        myChartRef3.current = null;
      }
      if (myChartRef4.current) {
        myChartRef4.current.dispose();
        myChartRef4.current = null;
      }
    };
  }, [chartData, chartData2, chartData3, chartData4]); // 依赖项包含四个数据状态

  return (
    <div style={{ padding: '10px' }}>
      {/* 第一行：两个图表并排 */}
      <div style={{ display: 'flex', gap: '20px', justifyContent: 'center', marginBottom: '20px' }}>
        <div ref={chartRef1} style={{ width: '50%', height: '350px' }}></div>
        <div ref={chartRef2} style={{ width: '50%', height: '350px' }}></div>
      </div>
      {/* 第二行：饼图和折线图并排 */}
      <div style={{ display: 'flex', gap: '20px', justifyContent: 'center' }}>
        <div ref={chartRef3} style={{ width: '50%', height: '350px' }}></div>
        <div ref={chartRef4} style={{ width: '50%', height: '350px' }}></div>
      </div>
    </div>
  );
};

export default ChartComponent;
